<template>
	<view  class="body" :style="'height:'+height+'px'">
		<view class="background_image" style="background-color: #FFFFFF;"></view>

		<view class="header">
			<view class="info_comment">
				<!-- #ifndef APP-PLUS -->
				<view class="download_app"><text>下载APP</text></view>
				<!-- #endif -->
				<button class="avatar_and_nickname">
					<image :src="userInfo.avatar" mode="widthFix"></image>
				</button>
				<view class="nickname"><text class="nickname_text">{{userInfo.nickname}}</text></view>
			</view>
		</view>

		<view style="height: 40rpx;"></view>

		<view class="u-m-t-20">

			<button class="go_button">
				<u-icon size="40rpx" name="/static/home/money.svg"></u-icon>
				资金管理
			</button>
			<view :style="'height:'+buttonMarginBig+'rpx;'"></view>
			<button class="go_button">
				<u-icon size="40rpx" name="/static/home/collect.svg"></u-icon>
				我的收藏
			</button>
			<view :style="'height: '+buttonMarginSmall+'rpx;'"></view>

			<button class="go_button">
				<u-icon size="40rpx" name="/static/home/play.svg"></u-icon>
				观看记录
			</button>
			<view :style="'height:'+buttonMarginBig+'rpx;'"></view>
			<button class="go_button">
				<u-icon size="40rpx" name="/static/home/book.svg"></u-icon>
				我的作品
			</button>
			<view :style="'height: '+buttonMarginSmall+'rpx;'"></view>
			<button class="go_button" @click="toPage('../upload/upload')">
				<u-icon size="40rpx" name="/static/home/my_upload.svg"></u-icon>
				上传作品
			</button>
		</view>


		<b-tabbar icon-size="55rpx" :list="list" inactive-color="rgba(255,255,255,.7)" active-color="rgba(255,255,255,1)"
		 style="font-size: 50rpx;" />


	</view>

</template>

<script>
	import bTabbarWhite from "../../components/b-tabar-white/b-tabbar-white.vue";
	import bTabbar from '../../js/bTabbar.js';

	let list = bTabbar.getTabbarList();
	var data = {
		list: list,
		img2Show: true,
		height: wx.getSystemInfoSync().windowHeight || window.innerHeight,
		width: wx.getSystemInfoSync().windowWidth || window.innerHeight,
		buttonMarginSmall: 15,
		buttonMarginBig: 40,
		userInfo: {
			"nickname": "-点击登录-",
			"gender": null,
			"language": null,
			"city": null,
			"province": null,
			"country": null,
			"avatar": "../../static/1.jpg"
		}
	};
	let that;
	export default {
		components: {
			'b-tabbar-white': bTabbarWhite
		},
		data() {
			return data;
		},
		onLoad() {

			var userInfo = uni.getStorageSync("userInfo");
			if (userInfo.nickname.length > 0)
				data.userInfo = userInfo;

			that = this;
			uni.login({
				success: function(res) {
					that.code = res.code;
				}
			})
		},
		mounted() {
			if (this.height > 700) {
				this.buttonMarginSmall = 35
				this.buttonMarginBig = 70;
			} else {}

			that = this;

		},
		methods: {
			
			toPage(path) {
				uni.navigateTo({
					url: path,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			img2ShowToFalse() {
				setTimeout(function() {
					data.img2Show = false;
				}, 100);

				setTimeout(function() {
					data.img2Show = true;
				}, 700);

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #00aaff;
	}
	.body{
		background: #00aaff;
	}
	.go_button {
		position: relative;
		border-radius: 10rpx;
		width: 500rpx;
		border-radius: 50rpx 0 50rpx 0;
		background-color: rgba(255, 255, 255, .1);
		box-shadow: 5px 5px 10px #0092db;
		color: #F0F0F0;
		border: 2rpx solid #00aaff;

		.u-icon {
			position: absolute;
			left: 40rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.go_button:active {
		box-shadow: 2px 2px 10px #0092db;

	}

	.info_comment {
		padding: 80rpx 0 30rpx 0rpx;
		text-align: center;
		width: 720rpx;
		margin-left: 15rpx;
		margin-top: 70rpx;
		border-radius: 100rpx 200rpx 100rpx 200rpx;
		border-radius: 50rpx;

		background: linear-gradient(145deg, #0099e6, #00b6ff);
		box-shadow: 5px 5px 10px #0092db,
			-5px -5px 10px #00c2ff;

		.download_app {
			position: fixed;
			top: 100rpx;
			left: 55rpx;
			background-color: rgba(255, 255, 255, .7);
			padding: 2rpx 10rpx 2rpx 10rpx;
			border-radius: 20rpx;
			position: absolute;
			text-align: left;
			color: rgba(255, 255, 255, .7);
			font-size: 30rpx;
			background: #00aaff;
			box-shadow: 5px 5px 10px #0092db,
				-5px -5px 10px #00c2ff;
		}

		.avatar_and_nickname {

			border: none;
			box-shadow: none;
			display: inline-block;
			border-radius: 55%;
			height: 208rpx;
			background-color: rgba(0, 0, 0, 0);

			image {
				margin: 0;
				box-shadow: 5px 5px 10px #0092db,
					-5px -5px 10px #00c2ff;
				width: 200rpx;
				border: 10rpx solid #00aaff;
				border-radius: 55%;
			}

			text {
				margin: 0;
			}

			view {
				margin: 0;
			}
		}


		.nickname {
			color: #fff;

			.nickname_text {
				border-radius: 20rpx;
				background: #00aaff;
				box-shadow: inset 10px 10px 21px #0092db,
					inset -10px -10px 21px #00c2ff;
				padding: 0 30rpx 0 30rpx;
				color: rgba(255, 255, 255, .7);
			}
		}

		.edit {
			margin-top: 30rpx;
			color: #fff;
			display: inline-block;
			background-color: rgba(255, 255, 255, .2);
			border-left: 5rpx solid #fff;
			border-right: 5rpx solid #fff;
			padding: 10rpx;
			border-radius: 20rpx;

		}

	}

	.edit:active {
		padding: 10rpx 20rpx 10rpx 20rpx;
	}


	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
